<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="12">
        <div style="text-align: center">个人榜</div>
        <el-table :data="userChartRef" style="width: 100%" :show-header="false">
          <el-table-column
            type="index"
            label=""
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column prop="userName" label="名称" align="center">
          </el-table-column>
          <el-table-column prop="dealPrice" label="业绩" align="center">
            <template #default="scope">
              <span>{{ scope.row.dealPrice }}元</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <div style="text-align: center">门店榜</div>
        <el-table
          :data="storeChartRef"
          style="width: 100%"
          :show-header="false"
        >
          <el-table-column
            type="index"
            label=""
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column prop="storeName" label="名称" align="center">
          </el-table-column>
          <el-table-column prop="dealPrice" label="业绩" align="center">
            <template #default="scope">
              <span>{{ scope.row.dealPrice }}元</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { getPerformanceRanking } from "@/api";
const storeChartRef = ref([]);
const userChartRef = ref([]);
onMounted(() => {
  getPerformanceRanking().then((res) => {
    storeChartRef.value = res.data.storeRanking;
    userChartRef.value = res.data.userRanking;
  });
});
</script>
<style scoped></style>
